<template>
	<view class="an-map">
		<map id="mapShare" 
				subkey="FKXBZ-MVL3J-MY7FZ-F4IJQ-BD7W7-RSBDO"
				:scale="12"
				:show-location="true" 
				:show-compass="true"
				:latitude="latitude"
				:longitude="longitude"
				:markers="covers">
		</map>
		
		<uni-fab ref="fab" :pattern="pattern" :content="content" horizontal="right" vertical="bottom" direction="vertical" @trigger="trigger" />
		
		<!-- 分享模块 -->
		<an-share ref="anShare" :targetItem="targetItem"></an-share>
		
	</view>
</template>

<script>
	import uniFab from '@/components/uni-fab/uni-fab.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import anShare from "@/components/an-share.vue"
	import Api from '@/common/vmeitime-http/'
	import {mapState} from 'vuex'
	const util = require('@/common/util.js');
	export default {
		components: {
			uniFab,
			uniPopup,
			uniIcons,
			anShare
		},
		data() {
			return {
				id: '',	// 打卡记录的ID
				covers: [],		// 地图标记点定位
				latitude: 39.909,		// 地图中心 坐标
				longitude: 116.39742,	// 地图中心 坐标
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF'
				},
				content: [{
					iconPath: '/static/img/nav.png',
					selectedIconPath: '/static/img/nav.png',
					text: '导航',
					active: false
				},{
					iconPath: '/static/img/homeD.png',
					selectedIconPath: '/static/img/homeD.png',
					text: '打卡',
					active: false
				}],
				targetItem:{},	// 查询的打卡参数
			}
		},
		computed: {
			...mapState(['hasLogin','openid']),
		},
		onLoad(query){
			// 页面参数转码 scene
			this.id = decodeURIComponent(query.scene)
			// 初始化地图组件
			this.mapCtx = wx.createMapContext('mapShare') 
			this.getData()
		},
		onShareAppMessage(res) {	// 分享 转发 事件触发
			let nd ={	// 别人的打卡
				title: '你可以用这个记录你去过的地方',
				path: '/pages/index/index'
			}
			if(this.hasLogin && this.openid == this.targetItem.openid){
				let url = '/pages/shareLocation/shareLocation?scene='+ encodeURIComponent(this.id)
				nd = {	// 自己的打卡分享
					title: this.targetItem.time.substring(0,11) + '我在这里',
					path: url,
				}
			}
		    return nd
		},
		methods: {
			anLoad(){	// 判断 启用页面转发和分享
				if(this.hasLogin ){	// 已登录  显示历史按钮
					let newArry = this.content
					if(this.openid == this.targetItem.openid){	//并且是本人的打卡 显示分享按钮
						let nd = {
							iconPath: '/static/img/share.png',
							selectedIconPath: '/static/img/share.png',
							text: '分享',
							active: false
						}
						newArry.unshift(nd)
					}
				}
			},
			getData(){	// 查询打卡历史信息
				uni.showLoading({ title: '加载中'})
				Api.wxGetSignInfo({
				        id: this.id
				    }).then(res=>{
					uni.hideLoading()
					this.targetItem = res
					this.mapOption()
					this.anLoad()
				})
			},
			mapOption(){	// 地图定位
				let newdata = this.targetItem
				let newmapdata = [];
				newmapdata.push({
				  iconPath: '../../static/img/location.png',
				  longitude: newdata.longitude,
				  latitude: newdata.latitude,
				});
				this.longitude = newdata.longitude
				this.latitude = newdata.latitude
				this.covers = newmapdata
			},
			trigger(e) { // 浮动按钮点击事件
				if(e.item.text == '打卡'){
					uni.switchTab({
					    url: '/pages/index/index'
					});
				}else if(e.item.text == '分享'){
					this.shareOpen()
				}else if(e.item.text == '导航'){
					this.clickNavigation()
				}
			},
			// 导航
			clickNavigation(){
				let _this = this
				this.$api.wxGetUserInfo({openid:this.openid}).then(user=>{
					let name = "["+ user.nickname + "]到此一游"
					uni.getLocation({
					 type: 'gcj02', //返回可以用于wx.openLocation的经纬度
					 success (res) {
						uni.openLocation({
					        latitude:parseFloat(_this.targetItem.latitude),
					        longitude:parseFloat( _this.targetItem.longitude),
					        name: name,
					        address: _this.targetItem.address
					     })
					 }
					})
				})
			},
			shareOpen(){	// 分享
				this.$refs.anShare.shareOpen()
			},
			
		}
	}
</script>

<style lang="scss" scoped>

</style>
